<template>
  <div class="body">
    <div class="line" v-for="(item, index) in forList" :key="index">
      <div class="item">
        <div v-if="list[index * 4 + 0] != null" @click="seeDetail(index * 4 + 0)" style="cursor: pointer;">
          <div class="image">
            <img :src="list[index * 4 + 0].path" alt="" />
          </div>
          <div class="name">
            {{
              list[index * 4 + 0].description.length >= 40
                ? list[index * 4 + 0].description.substring(0, 40) + "..."
                : list[index * 4 + 0].description
            }}
          </div>
          <div class="price">
            <span>
              <span style="color: red; font-size: 21px">￥</span>
              {{ list[index * 4 + 0].price }}</span
            >
          </div>
        </div>
      </div>
      <div class="item">
        <div v-if="list[index * 4 + 1] != null"  @click="seeDetail(index * 4 + 1)" style="cursor: pointer;">
          <div class="image">
            <img :src="list[index * 4 + 1].path" alt="" />
          </div>
          <div class="name">
            {{
              list[index * 4 + 1].description.length >= 40
                ? list[index * 4 + 1].description.substring(0, 40) + "..."
                : list[index * 4 + 1].description
            }}
          </div>
          <div class="price">
            <span>
              <span style="color: red; font-size: 21px">￥</span>
              {{ list[index * 4 + 1].price }}</span
            >
          </div>
        </div>
      </div>
      <div class="item">
        <div v-if="list[index * 4 + 2] != null"  @click="seeDetail(index * 4 + 2)" style="cursor: pointer;">
          <div class="image">
            <img :src="list[index * 4 + 2].path" alt="" />
          </div>
          <div class="name">
            {{
              list[index * 4 + 2].description.length >= 40
                ? list[index * 4 + 2].description.substring(0, 40) + "..."
                : list[index * 4 + 2].description
            }}
          </div>
          <div class="price">
            <span>
              <span style="color: red; font-size: 21px">￥</span>
              {{ list[index * 4 + 2].price }}</span
            >
          </div>
        </div>
      </div>
      <div class="item" >
        <div v-if="list[index * 4 + 3] != null"  @click="seeDetail(index * 4 + 3)" style="cursor: pointer;">
          <div class="image">
            <img :src="list[index * 4 + 3].path" alt="" />
          </div>
          <div class="name">
            {{
              list[index * 4 + 3].description.length >= 40
                ? list[index * 4 + 3].description.substring(0, 40) + "..."
                : list[index * 4 + 3].description
            }}
          </div>
          <div class="price">
            <span>
              <span style="color: red; font-size: 21px">￥</span>
              {{ list[index * 4 + 3].price }}</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [{}, {}, {}, {}, {},],
      forList: [""],
    };
  },
  computed: {},
  methods: {
    seeDetail(index) {
      let selectProduct = this.list[index]
      let productId = selectProduct.id
      this.$router.push('/productDetail?productId=' + productId)
}
  },
  created() {
    this.$http({
      url: "/product/getAllProducts",
      method: "get",
    }).then((res) => {
      console.log(res);
      this.list = res;

      let forList = this.forList;
      for (let i = 1; i < this.list.length; i++) {
        if (i % 4 == 0) {
          forList.push("");
        }
      }
      this.forList = forList;
    });
  },
};
</script>

<style scoped>
.body {
  width: 75%;
  margin: auto;
}

.line {
  height: 300px;
  display: flex;
  margin-top: 20px;
}

.item {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.image {
  height: 200px;
}

.image img {
  width: 100%;
  height: 100%;
}

.name {
  flex: 30px;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #606266;
}

.price {
  flex: 30px;
  display: flex;
  align-items: center;
}

.price span {
  margin: auto;
  font-weight: 250;
  font-size: 15px;
}
</style>